import React,{ Component,Fragment} from 'React';
import './app.css'
import { CSSTransition } from 'react-transition-group';

class App extends Component{

    constructor(props){
        super(props);
        this.state={
            show:true
        }
        this.handleToggole=this.handleToggole.bind(this)
    }

    render(){
        return(
            <Fragment>
                <TransitionGroup className="todo-list"></TransitionGroup>
                <CSSTransition
                    in={this.state.show}
                    timeout={1000}
                    classNames="fade"
                    unmountOnExit
                    appear={true}
                >
                    <div>
                        hello
                    </div>
                </CSSTransition>
                <button onClick={this.handleToggole}>toggle</button>
            </Fragment>  
        )
    }

    handleToggole(){
        this.setState((prevState,props)=>{
            return{
                show:!prevState.show
            }
        })
    }
}

export default App